<template>
    <el-form :inline="true" :model="pageHelper" class="demo-form-inline">
        <el-form-item label="">
            <el-input v-model="pageHelper.keyword" placeholder="请输入关键词" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="toggleSelection()">删除选中</el-button>
    <el-table :data="state.list" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="150" />
        <el-table-column prop="userName" label="用户名" width="150" />
        <el-table-column prop="userPwd" label="密码" width="150" />
        <el-table-column prop="gender" label="性别" width="150" />
        <el-table-column prop="roleName" label="角色" width="150" />
        <el-table-column label="操作" min-width="150">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="pageHelper.total" :page-size="pageHelper.pageSize"
            :current-page="pageHelper.currentPage" @current-change="handleCurrentChange" />
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import axios from 'axios'
import { useRouter } from "vue-router"
import { ElTable } from 'element-plus'
import qs from 'qs'

const router = useRouter();

const pageHelper = reactive({
    keyword: '',//模糊查询关键词
    total: 10, // 总数据量
    pageSize: 2, // 每页显示的数据数量
    currentPage: 1, // 当前页码
})

const state = reactive({
    list: [] as any
})

onMounted(() => {
    // 页面加载完成后自动触发查询，假设初始页码为 1
    handleCurrentChange(1);
});


const onSubmit = () => {
    handleCurrentChange(pageHelper.currentPage)
}

function handleCurrentChange(page: number): void {
    // 更新页码
    pageHelper.currentPage = page;
    // 在这里可以根据当前页码，请求对应的数据
    // 例如：fetchData(page);
    // 发送 Axios 请求
    axios.get('http://localhost:8888/user/getUserList', {
        params: {
            pageNum: page,
            keyword: pageHelper.keyword,
            pageSize: pageHelper.pageSize
        }
    })
        .then(response => {
            // 请求成功，处理返回的数据
            // 更新数据
            pageHelper.total = response.data.total;
            state.list = response.data.list;
            // 其他操作...
        })
        .catch(error => {
            // 请求失败，处理错误信息
            console.error(error);
        });
}

const convertGender = (gender: string) => {
    return gender === '男' ? '1' : '0';
};


const handleEdit = (index: number, row: any) => {
    // 在这里编写编辑方法的逻辑
    // 路由跳转并传递参数
    router.push({
        name: 'UserEdit', params: {
            id: row.id,
            userName: row.userName,
            userPwd: row.userPwd,
            gender: convertGender(row.gender),
            roleId: row.roleId
        }
    });
};

const handleDelete = (index: number, row: any) => {
    // 在这里编写删除方法的逻辑
    axios.delete(`http://localhost:8888/user/deleteUser/${row.id}`)
        .then(response => {
            alert(response.data.msg)
            // 在这里编写删除成功后的逻辑
            // 从表格中删除行数据
            handleCurrentChange(pageHelper.currentPage)
        })
        .catch(error => {
            console.error(error);
            // 在这里编写删除失败后的逻辑
        });
};

interface User {
    id: number,
    userName: string,
    userPwd: string,
    gender: number,
    roleId: number
}
const ids = ref<number[]>([]); // 存放选中行数据的 id 值数组
const toggleSelection = () => {
    if (!ids.value.length) {
        alert("请选择要删除的数据")
        return
    }
    axios.get('http://localhost:8888/user/deleteUserByIds', {
        params: {
            ids: ids.value
        },
        paramsSerializer: function (params) {
            return qs.stringify(params, { arrayFormat: 'repeat' })
        }
    })
        .then(response => {
            // 处理响应数据
            alert(response.data.msg)
            handleCurrentChange(pageHelper.currentPage)
        })
        .catch(error => {
            // 处理错误
            console.error(error)
        });
}
const handleSelectionChange = (val: User[]) => {
    ids.value = val.map(user => user.id); // 取出选中行数据的 id 值
}
</script>
  
  
<style scoped>
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>